<template>
  <div class="conter">
    <h3>
      根据<span>"{{ id }}"</span>搜索的结果
    </h3>
    <div>
      <ul ref="pannel" class="goods-list">
        <li v-for="item in newDatalist" :key="item.id">
          <router-link :to="{ path: '/goods', query: { id: item.pushid, typeCode: 2 } }">
            <img :src="'http://www.yocar.website:8080/yoche/img/' + item.photo[0]" alt="" />
            <p class="name">{{ item.brand }}</p>
            <p>{{ item.card_time | data }}</p>
            <p class="price">&yen;{{ item.price }}万元</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { navSearch } from '@/api/cart'
export default {
  name: 'NavSearch',
  data() {
    return {
      newData: [],
      newDatalist:[]
    }
  },
  computed: {
    id: function () {
      return this.$route.params.id
    }
  },
  created() {
    this.updata()
  },
  methods: {
    async updata() {
      const res = await navSearch({
        brand: this.id,
        city_name: '全国',
        typeCode: 2,
        orderCode: 1,
        pageNum: 1,
        pageSize: 12
      })
      // 渲染
      this.newData = res.data.data.map(item => {
        item.car.photo = item.car.photo.split('#')
        return item
      })
      this.newData.forEach(item => {
        item.car.pushid = item.id
        this.newDatalist.push(item.car)
      })
    }
  },
  filters: {
    data: value => {
      return new Date(value).getFullYear()
    }
  }
}
</script>
<style lang="less" scoped>
.conter {
  background-color: #fff;
  h3 {
    padding: 25px;
    span {
      color: red;
    }
  }
}
.goods-list {
  padding-left: 0px;
  margin: 0;
  li {
    display: inline-block;
    list-style: none;
    width: 300px;
    height: 406px;
    background: #f0f9f4;
    a {
      text-decoration: none;
    }
    img {
      width: 300px;
      height: 200px;
    }
    p {
      font-size: 18px;
      line-height: 18px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: red;
    }
  }
}
</style>
